<template>
	<div id="mainContent" v-if="loadDone">
		<vert-theme :page-data="pageData" v-if="pageData&&pageData.screen_orient=='VER'"></vert-theme>
		<horizon-theme :page-data="pageData"  v-if="pageData&&pageData.screen_orient=='HOR'"></horizon-theme>
        <floating-cart-icon></floating-cart-icon>
	</div>
</template>

<script>
import vertTheme from './pages/theme/vert-theme.vue'
import horizonTheme from './pages/theme/horizon-theme.vue'
import utils from '@utils'


const getQueryObject = function (url) {
    url = url == null ? window.location.search : url;
    var search = url;
    var obj = {};
    var reg = /([^?#&=]+)=([^&]*)/g;
    search.replace(reg, function(rs, $1, $2) {
        var name = decodeURIComponent($1);
        var val = decodeURIComponent($2);
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}

export default {
    name: 'app',
    components: {
    	vertTheme,
    	horizonTheme
    },
    mixins: [ utils.MixinBase ],
    data() {
        return {
            qs: {},
            loadDone: false,
            pageData: {
            	screen_orient: "",
            	list: []
            }
        }
    },
    mounted() {
        this.qs = getQueryObject();
        this.loadDone = false
        this.$indicator.open({
            spinnerType: 'fading-circle',
            text: '加载中...'
        });
        this.wechatInit().then(()=> {
            this.init();
        }, ()=> {
            this.init();
        });
    	
    },
    methods: {
        init() {
            if(this.qs.id) {
                this.getH5DiyJsonById(this.qs.id).then((pageJson)=> {
                    this.$indicator.close();
                    this.loadDone = true;
                    this.pageData.screen_orient = pageJson.screen_orient;
                    if(pageJson.json_txt) {
                        try {
                            this.pageData.list = JSON.parse(pageJson.json_txt)
                        } catch(err) {
                            this.pageData.list = []
                        }
                    }

                    var imagesPromise = [];
                    for(var i=0;i<this.pageData.list.length;i++) {
                        var rowGoods = this.pageData.list[i].data.goods;
                        for(var j=0;j<rowGoods.length;j++) {
                            imagesPromise.push(this.imagePromiseHandler(rowGoods[j].image));
                        }
                    }
                   
                });
            }
        },
        imagePromiseHandler(url){
            return new Promise((resolve, reject) => {
                var img = new Image();
                img.onload = function() {
                    resolve();
                }
                img.src=url;
            });
        }
    }
}
</script>
